<template>
    <div class="list">
            <ul>
            <li  v-for="(item,i) in arr" :key="item.id" :class="{active:item.isComputed}">
                <div class="content">
                <input type="checkbox" :checked="item.isComputed" @change="isChecked(item,$event)">
                <b>{{item.todo}}</b>
                </div>
                <button @click="delClick(i)">X</button>
            </li>
            </ul>
        </div>
        <div class="options">
            <button @click="filter('all')">全部</button>
            <span style="color: red; margin-right: 5px; font-size: 18px;">{{props.allCount}}</span>
            <span>条事项</span>
            <button @click="filter('complete')">已完成:
                <span style="color: red; margin-right: 5px; font-size: 18px;">{{props.completeCount}}</span>
            </button>
            <button @click="filter('active')">未完成:
                <span style="color: red; margin-right: 5px; font-size: 18px;">{{props.activeCount}}</span>
            </button>
        </div>
        
</template>


<script setup>
import {defineProps,toRefs,ref, onRenderTracked,onRenderTriggered} from "vue"

let props = defineProps(['arr','allCount','completeCount','activeCount'])
let {arr} = toRefs(props)



let emits = defineEmits(['del','filterFlag'])
let delClick = function(i){
    emits('del',i)
}

// 勾选
let isCheck = ref(false)
let isChecked = function(item,e){
    //拿到input:checkbox元素的勾选状态
    console.log(e.target.checked)
    item.isComputed = e.target.checked
    // console.log(arr)
}

// 详情
let filter = function(input){
    emits('filterFlag',input)
}

// 页面渲染的时候触发，页面加载就会触发
onRenderTracked((debuggerEvent)=>{
    console.log('tracked----',debuggerEvent)
})


// 虚拟dom发生变化的时候触发，页面加载的时候不触发
onRenderTriggered((debuggerEvent)=>{
    console.log('trigger----',debuggerEvent)
})
</script>






<style scoped>
 li{
      width: 100%;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .enter{
        display: inline-block;
        flex-grow: .65;
        margin-right: 15px;
    }
    .enter input{
        background: transparent;
        border: 0;
        border-bottom: 3px dashed #00bfff;
        font-size: 18px;
        outline: 0;
        padding: 5px 0 3px;
        width: 100%;
    }
    .list button{
      border: none;
      background-color:white;
      font-size: 16px;
      width: 20px;
      height: 20px;
      display:flex;
      justify-content: center;
      align-items: center;
    }
    ul{
      margin: 0;
      padding: 0;
      margin-top: 20px;
    }

    .options button{
      background: transparent;
      border: 1px double #00bfff;
      color: #666;
      cursor: pointer;
      font-size: 16px;
      font-weight: bolder;
      margin: 10px;
      outline: 0;
    }

    .active{
        background-color: pink;
    }
</style>